<template>
  <div>
    <el-dialog :title="title" :visible.sync="open" :close-on-click-modal="false" width="1024px" append-to-body>
      <div style="height: 600px;">
        <el-form ref="form" :model="form" label-width="100px">
          <el-tabs v-model="activeName" type="card">
            <el-tab-pane label="人员信息" name="basic">
              <el-row :gutter="20" class="el-row0" type="flex">
                <el-divider content-position="left">基本信息</el-divider>
              </el-row>
              <el-row :gutter="20" class="el-row1" type="flex">
                <el-col :span="8">
                  <el-form-item label="姓名">{{ form.name }}</el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="联系电话">{{ form.phone }}</el-form-item>
                </el-col>
                <el-col :span="8">

                  <div class="img-list">
                    <div class="img-li-box">
                      <img class="img-li-b--url" v-if="form.photo==''|| form.photo==undefined" :src="require('@/assets/images/profile.jpg')"/>
                      <img class="img-li-b--url" v-else :src="base + form.photo"/>
                      <div class="img-li-b--bottom">
                        <div class="img-li-b--name">身份证照</div>
                      </div>
                    </div>
                    <div class="img-li-box">
                      <img class="img-li-b--url" v-if="form.recentPhoto==''|| form.recentPhoto==undefined" :src="require('@/assets/images/profile.jpg')"/>
                      <img class="img-li-b--url" v-else :src="base + form.recentPhoto"/>
                      <div class="img-li-b--bottom">
                        <div class="img-li-b--name">现场近照</div>
                      </div>
                    </div>
                  </div>
                </el-col>
              </el-row>
              <el-row :gutter="20" class="el-row1" type="flex">
                <el-col :span="8">
                  <el-form-item label="性别">{{ this.selectDictLabel(this.dict.type.sys_user_sex, form.sex) }}</el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="政治面貌">{{ form.politicalStatus }}</el-form-item>
                </el-col>
              </el-row>
              <el-row :gutter="20" class="el-row1" type="flex">
                <el-col :span="8">
                  <el-form-item label="民族">{{ form.nation }}</el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="文化程度">{{ form.degreeName }}</el-form-item>
                </el-col>
              </el-row>
              <el-row :gutter="20" class="el-row1" type="flex">
                <el-col :span="8">
                  <el-form-item label="出生日期">{{ parseTime(form.birthDate, '{y}-{m}-{d}') }}</el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="紧急联系人">{{ form.urgentContact }}</el-form-item>
                </el-col>
              </el-row>
              <el-row :gutter="20" class="el-row1" type="flex">
                <el-col :span="8">
                  <el-form-item label="身份证号">{{ form.idNo }}</el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="联系人电话">{{ form.urgentTel }}</el-form-item>
                </el-col>
              </el-row>
              <el-row :gutter="20" class="el-row1" type="flex">
                <el-col :span="12">
                  <el-form-item label="地址">{{ form.address }}</el-form-item>
                </el-col>
              </el-row>
              <el-row :gutter="20" class="el-row1" type="flex">
                <el-col :span="12">
                  <el-form-item label="发证机关">{{ form.signingOrg }}</el-form-item>
                </el-col>
              </el-row>
              <el-row :gutter="20" class="el-row0" type="flex">
                <el-divider content-position="left">岗位信息</el-divider>
              </el-row>
              <el-row :gutter="20" class="el-row1" type="flex">
                <el-col :span="12">
                  <el-form-item label="岗位状态">
                    <dict-tag :options="dict.type.labour_staff_status" :value="form.status"/>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="岗位工种">{{ form.postName }}</el-form-item>
                </el-col>
              </el-row>
              <el-row :gutter="20" class="el-row1" type="flex">
                <el-col :span="12">
                  <el-form-item label="项目标段">{{ form.bidName }}</el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="进场日期">{{ parseTime(form.enterDate, '{y}-{m}-{d}') }}</el-form-item>
                </el-col>
              </el-row>
              <el-row :gutter="20" class="el-row1" type="flex">
                <el-col :span="12">
                  <el-form-item label="施工队伍">{{ form.battalionName }}</el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="退场日期">{{ parseTime(form.exitDate, '{y}-{m}-{d}') }}</el-form-item>
                </el-col>
              </el-row>
              <el-row :gutter="20" class="el-row1" type="flex">
                <el-col :span="12">
                  <el-form-item label="施工班组">{{ form.teamName }}</el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="班组长">{{ this.selectDictLabel(this.dict.type.sys_yes_no, form.isMonitor) }}</el-form-item>
                </el-col>
              </el-row>
            </el-tab-pane>
            <el-tab-pane label="从业信息" name="record">
              <el-row :gutter="20" class="el-row0" type="flex">
                <el-divider content-position="left">从业信息</el-divider>
              </el-row>
              <el-row :gutter="20" type="flex">
                <el-table :data="recordList" height="450">
                  <el-table-column label="项目标段" align="center" prop="institutionName" />
                  <el-table-column label="进场日期" align="center" prop="enterDate" />
                  <el-table-column label="退场日期" align="center" prop="exitDate" />
                  <el-table-column label="施工队伍" align="center" prop="battalionName" />
                  <el-table-column label="施工班组" align="center" prop="teamName" />
                  <el-table-column label="岗位工种" align="center" prop="postName" />
                  <el-table-column label="状态" align="center" prop="status">
                    <template slot-scope="scope">
                      <dict-tag :options="dict.type.labour_staff_status" :value="scope.row.status"/>
                    </template>
                  </el-table-column>
                </el-table>
              </el-row>
            </el-tab-pane>
            <el-tab-pane label="身份证照" name="photo">
              <el-row :gutter="20" class="el-row0" type="flex">
                <el-divider content-position="left">身份证照</el-divider>
              </el-row>
              <el-row :gutter="20" type="flex" style="padding-top: 50px;">
                <el-col :span="4"><div class="grid-content bg-purple"></div></el-col>
                <el-col :span="8">
                  <div class="img-show">
                    <img :src="base + form.cardFrontPhoto" v-if="form.cardFrontPhoto != undefined" class="avatar">
                    <span class="actions">
                  </span>
                  </div>
                  <div class="tip" style="text-align: center;padding-top: 10px;width: 300px;">身份证正面（头像）</div>
                </el-col>
                <el-col :span="8">
                  <div class="img-show">
                    <img :src="base + form.cardBackPhoto" v-if="form.cardBackPhoto != undefined" class="avatar">
                    <span class="actions">
                  </span>
                  </div>
                  <div class="tip" style="text-align: center;padding-top: 10px;width: 300px;">身份证背面（国徽）</div>
                </el-col>
                <el-col :span="4"><div class="grid-content bg-purple"></div></el-col>
              </el-row>
            </el-tab-pane>
          </el-tabs>

        </el-form>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  import { browse } from "@/api/site/labour/staff";

  export default {
    name: "browseStaff",
    dicts: ['sys_user_sex', 'labour_staff_status', 'sys_yes_no'],
    data() {
      return {
        base: process.env.VUE_APP_BASE_API,
        // 弹出层标题
        title: "人员信息卡",
        activeName: "basic",
        // 是否显示弹出层
        open: false,
        id: undefined,
        idNo: undefined,
        form: {},
        recordList: [],
      }
    },
    methods: {
      show(id, idNo) {
        this.id = id;
        this.activeName = "basic";
        this.idNo = idNo;
        this.getInfo();
      },
      getInfo() {
        browse(this.id).then(response => {
          this.form = response.staff;
          console.log(this.form.cardFrontPhoto)
          this.form.bidName = response.bidName;
          this.recordList = response.records;
          console.log(this.recordList);
          this.open = true;
        });
      }
    }
  }
</script>

<style type="text/css">
  .el-row0 {
    height: 55px;
  }
  .el-row1 {
    height: 40px;
  }
  .grid-content {
    border-radius: 4px;
    min-height: 36px;
  }
  .bg-purple-dark {
    background: #99a9bf;
  }
</style>

<style lang="scss" scoped>

  .img-list {
    overflow: hidden;
    width: 100%;

    // 文件列表
    .img-li-box {
      float: left;
      text-align: left;
      position: relative;
      display: inline-block;
      width: 120px;
      height: 140px;
      padding: 5px;
      margin: 5px 20px 20px 0;
      border: 1px solid #d1dbe5;
      border-radius: 4px;
      transition: all .3s;
      box-shadow: 0 2px 4px 0 rgba(0, 0, 0, .12), 0 0 6px 0 rgba(0, 0, 0, .04);

      // 图片
      .img-li-b--url {
        display: block;
        width: 100%;
        height: 100px;
        margin: 0 auto;
        border-radius: 4px;
      }

      // 底部
      .img-li-b--bottom {
        margin-top: 10px;
        // 名称
        .img-li-b--name {
          text-align: center;
          padding-top: 5px;
          width: 90%;
          text-overflow: ellipsis;
          overflow: hidden;
          height: 25px;
          line-height: 10px;
        }
      }
    }
  }

  .img-show{
    position: relative;
    border: 1px solid #c0ccda;
    border-radius: 6px;
    box-sizing: border-box;
    width: 300px;
    height: 200px;
    cursor: pointer;
    overflow: hidden;
  }

  .avatar{
    width: 300px;
    height: 200px;
    display: block;
  }

  .actions{
    position: absolute;
    width: 100%;
    height: 100%;
    line-height: 200px;
    left: 0;
    top: 0;
    cursor: default;
    text-align: center;
    color: #fff;
    opacity: 0;
    font-size: 20px;
    background-color: rgba(0,0,0,.5);
    transition: opacity .3s;
  }
  /*.actions:hover{*/
  /*  opacity: 1;*/
  /*}*/
  /*.actions:hover span{*/
  /*  display: inline-block;*/
  /*}*/
  /*.actions span{*/
  /*  display: none;*/
  /*  margin: 0 16px;*/
  /*  cursor: pointer;*/
  /*}*/

</style>
